5. Backgrounds
Changing the background color was the first new feature
in XHTML MP that every WML developer used. It was heaven after the old
black and white WML. Every mobile browser understands the background property and its specific
definitions, like background-image
and background-repeat. However, we
need to remember that on mobile devices, the context of the user can
be very different from a desktop. It is not recommended to use a
complex background, and it’s best to use strongly contrasting
foreground and background colors.
In compatible browsers, it will be very helpful to use data URI
patterns for backgrounds to reduce network requests. One feature that
can be buggy on mobile devices is the use of background-attachment: fixed. This allows
the background image to be fixed even after scrolling.
Specifying multiple background images (separated by commas) is
not good practice for mobile browsers. Symbian S60 browsers appear to
be among the few that support it. Some WebKit-based browsers, like
mobile Safari, also accept some CSS3 attributes as extensions, like
-webkit-background-origin and
-webkit-background-size. The
upcoming Table 4
lists background compatibility.
6. Overflow
A common design pattern in desktop websites is to use a
div (or other element) with a fixed
size, and content larger than that size. Using the overflow property, we can define a value of
scroll, auto, visible (the default), or hidden to indicate what to do with the
content that is outside the bounds of the element. If we use a value
of scroll, the div will have its own scrollbar on
supporting devices.
The use of overflow is
discouraged, like the iframe
technique. Even with compatible devices, there are usability problems;
for one thing, it’s not easy for the user to tell if she’s moving the
main scrollbar or the inner scrollbar. And if it works, there are a
lot of bugs in mobile browsers, from touch devices with the scroll not
working to devices that hide the overflow content without providing
scrollbars. Even less compatible are the CSS3 overflow-x and overflow-y properties. Table 7-12 lists overflow
compatibility.
7. Content
The content attribute
allows us to use the after and
before pseudoclasses to define an
image, some text, or an attribute value to be inserted after or before
the selector. The problem is that these pseudoclasses are not defined
in the WAP CSS subset, so they will work in some devices but not in
others.
Some browsers allow us to apply the content property to any selector, but this
is not usually recommended because it will lead us to insert text and
content in the CSS instead of the (x)HTML document.
The following sample will add two stars after the link’s text
and a bullet image before:
a:after {
content: " ** "
}
a:before {
content: url('bullet.gif');
}
Table 4
lists compatibility for the use of content.
8. Opacity
Alpha transparency of elements inside a mobile web page
will not work in many low- and mid-end devices, so we should use it
with care and knowing that it may not have a visible effect. The
opacity CSS 2.1 property was not
defined in the WAP CSS subset, but we can still use it and compatible
browsers will render it. Compatibility with this and the other
properties just discussed is illustrated in Table 4.
Table 4. Common CSS display properties compatibility table
Browser/platform | Fixed background | overflow | content w/before &
after | content in any
selector | opacity |
---|
Safari | No | Yes, two fingers for
scrolling | Yes | No | Yes |
Android
browser | No | No
scrolling | Yes | No | Yes |
Symbian/S60 | Yes | Yes | Yes | No | No |
Nokia Series
40 | Yes | Yes but difficult from
6th edition No
before | Yes in 6th
edition No before
6th edition | No |
webOS | No | No
scrolling | Yes | No | No |
BlackBerry | No | No | No before
4.0 | No | No |
NetFront | Yes | No | No | No | No |
Openwave
(Myriad) | No | No | No | No | No |
Internet
Explorer | No | No | No | No | No |
Motorola Internet
Browser | No background image | No | No | No | No |
Opera
Mobile | No | Yes, difficult to
scroll | Yes | Yes | Yes |
Opera
Mini | No | No | Yes | Yes | Partial |
9. List design
Now is the time to use CSS to define our own design for each
list. For doing this we have the typical list properties in
CSS—list-style-type, list-style-image, and list-style-position—and the compressed
list-style.
The compatibility for these styles in the mobile web is great,
excepting some little differences in the bullets; for example, some devices show a square for a
bullet, even if it’s defined as a circle.
The use of images as bullets can enhance our designs. On
compatible devices remember that we can use small data URI images, eliminating the need for new requests for
the image.
10. Visibility
The visibility
property allows us to hide and show an element dynamically. This
property is covered by all mobile standards and we are free to use it
with the values visible and
hidden. The collapse value can be more
problematic.
11. Cursor management
CSS allows any web designer to define which mouse cursor
should be used in any situation (generally, the body or a :hover selector). In the mobile world this
is useful only for devices supporting cursor-based navigation, though,
because they are the only browsers that show some kind of cursor over
the screen.
The most useful cursors for mobile sites are default, pointer, and progress. The other cursors available
(resize and move) can be very difficult to use in any
mobile situation. We should use the pointer cursor for defining non-link
clickable zones (using a :hover
selector), which may be handled by a JavaScript event function.
The progress cursor is often
applied to the body dynamically with JavaScript to indicate to the
user that a current operation is working. In browsers supporting focus
and touch navigation, we should generate this pattern using a modal
pop-up window with a floating loading image.
A modal pop-up is a floating div that displays important information to
the user, while disabling and/or fading out the background
content. In the mobile world these are recommended only for smartphones
and should be used with extreme care. If we are displaying only
simple text, it is better to use the standard window.alert JavaScript function, as it
will render properly on all devices. |
Table 5 lists
compatibility with the progress and
pointer cursors for the various
browsers.
Table 5. Cursor compatibility table
Browser/platform | pointer
cursor | progress
cursor |
---|
Safari | No cursor available, touch
navigation |
Android
browser | No cursor available, touch or focus
navigation |
Symbian/S60 | Yes (using
keys) | No |
Nokia
Series 40 | Yes in
6th edition | No |
Before 6th
edition no cursor available, focus navigation |
webOS | No cursor available, touch
navigation |
BlackBerry | No | No |
NetFront | No | No |
Openwave
(Myriad) | No cursor available in focus navigation
mode |
Internet
Explorer | No | No |
Motorola Internet
Browser | No | Yes |
Opera
Mobile | No | No |
Opera
Mini | No | No |